<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--常见问题-->
    <u-navbar
      title="常见问题"
      leftIcon="arrow-left"
      leftIconSize="40"
      leftIconColor="#000000"
      @rightClick="isShow = true"
      :placeholder="true"
      :autoBack="true"
    >
      <view slot="right" @click="isShow = true"
        ><u-icon name="search" size="44" color="#000000"></u-icon
      ></view>
    </u-navbar>
    <!--加载组件-->
    <u-loading-page
      :loading="isLoading"
      loading-mode="spinner"
      icon-size="56rpx"
      loading-text="拼命加载中..."
      fontSize="28rpx"
      class="z-50 top-10"
    ></u-loading-page>

    <view class="ml-4" v-if="infiniteList.length > 0">
      <view
        class="w-full border-b-grayLight py-4"
        v-for="item in infiniteList"
        :key="item.id"
      >
        <view class="mr-3">
          <view
            class="flex items-center justify-between"
            @click="item.isShow = !item.isShow"
          >
            <view class="text-sm text-dark">{{ item.title }}</view>
            <view v-if="item.isShow"
              ><u-icon name="arrow-down" size="30" color="#000000"></u-icon
            ></view>
            <view v-else
              ><u-icon name="arrow-right" size="30" color="#000000"></u-icon
            ></view>
          </view>
          <view class="text-xs text-light leading-6 flex" v-if="item.isShow"
            ><u-parse :content="item.content"></u-parse>
          </view>
        </view>
      </view>
    </view>
    <b-empty :marginTop="220" v-else></b-empty>
    <!--搜索-->
    <view class="bg-white fixed left-0 top-0 w-full h-full z-50" v-if="isShow">
      <view class="mx-3 flex items-center mt-2.5">
        <view @click="isShow = false"
          ><u-icon name="arrow-left" size="42rpx"></u-icon
        ></view>
        <view class="w-5/6 ml-2.5">
          <u-search
            placeholder="搜索"
            v-model="keyword"
            height="60rpx"
            searchIconSize="40"
            :showAction="false"
          ></u-search
        ></view>
        <view class="text-sm w-1/6 text-center" @click="searchTo">搜索</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getQuestionList } from '../../../package-account/services/account';

export default {
  data() {
    return {
      isShow: false,
      isLoading: true,
      keyword: '',
      infiniteList: [],
    };
  },
  async created() {
    this.getInfiniteList();
  },
  methods: {
    //搜索
    searchTo() {
      try {
        if (this.keyword == '') {
          uni.showToast({
            title: '请输入搜索关键字',
            icon: 'none',
          });
          return;
        }
        this.getInfiniteList(true);
        this.isShow = false;
      } catch (error) {
        console.error(error);
      }
    },
    //常见问题列表
    async getInfiniteList() {
      const { code, data } = await getQuestionList({
        searchKey: this.keyword,
      });
      if (code != 200) return;
      this.isLoading = false;
      this.infiniteList = data.map((item) => {
        item.isShow = false;
        return item;
      });
    },
  },
};
</script>

<style>
::v-deep img {
  max-width: 100%;
  height: auto;
}
</style>
